<template>
  <div>
    <h1>防火预警系统</h1>
    <hr />
  </div>

  <div>
    <el-form :model="search" ref="form" label-width="60px" :inline="false" size="normal">
      <div class="flex">
        <el-form-item label="防火设备名称：" label-width="110px">
          <el-input v-model="search.name" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </div>
      <div class="flex justify-between ml-0" style="width: 100%">
        <el-button type="danger">批量删除</el-button>
        <el-button type="primary" @click="handleDrawer(null)">新增</el-button>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :data="facilityData" border stripe label-width="100%">
      <el-table-column type="selection" />
      <el-table-column label="设备编码" prop="num" />
      <el-table-column label="防火设备名称" prop="name" />
      <el-table-column label="区域信息" prop="parkName" />
      <el-table-column label="安装位置" prop="position" />
      <el-table-column label="备注" prop="remark" />
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <div class="flex">
            <el-button type="primary" size="small" @click="handleDrawer(scope.row)">编辑</el-button>
            <el-popconfirm title="你真的要删除嘛?" @confirm="handleDel(scope.row, scope.$index)">
              <template #reference>
                <el-button v-permit type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-center mt-10">
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[10, 100, 200]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      :title="rowData ? '编辑' : '新增'"
      v-model="drawer"
      direction="rtl"
      size="50%"
      destroy-on-close
    >
      <AddForm :edata="rowData" @update:table-data="handleUpdate" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue'
import { facilityDataType } from './types'
import { fireFacilityGet, fireFacilityDel } from '../../api/FireWarning/index'
import AddForm from './components/add_form.vue'
// 数据包
const facilityData = ref<Array<facilityDataType | null>>([])
const total = ref<number>(0)
// 表格渲染数据
let res = await fireFacilityGet()
let { results, count } = res.data
total.value = count
facilityData.value = results

// 模糊搜索
const search = reactive({
  name: ''
  // parkName: '',
})
const handleSearch = async () => {
  console.log(search)
  current.value = 1 //重新回到第一页
  let res = await fireFacilityGet(1, pageSize.value, search)
  // parkData.value = res.data.results
  let { results, count } = res.data
  facilityData.value = results
  total.value = count
}
// 重置
const handleReset = () => {
  search.name = ''
  // search.cate = ''
  facilityData.value = res.data.results
}
// 分页
const current = ref<number>(1)
const pageSize = ref<number>(10)
const handleSizeChange = async () => {
  current.value = 1 //重新回到第一页
  let res = await fireFacilityGet(1, pageSize.value)
  facilityData.value = res.data.results
}
const handleCurrentChange = async (page: number) => {
  let res = await fireFacilityGet(page, pageSize.value)
  facilityData.value = res.data.results
}

// 新增
const drawer = ref<boolean>(false)

// 编辑
const rowData = ref<facilityDataType | null>(null) //存放新增、编辑的数据包
const handleDrawer = (row: facilityDataType | null) => {
  console.log('区分新增、编辑', row)
  drawer.value = true
  rowData.value = row
}

// 更新本地
const handleUpdate = (newhealth: facilityDataType) => {
  drawer.value = false
  if (rowData.value) {
    // 编辑后,更新本地列表
    for (let i = 0; i < facilityData.value.length; i++) {
      if (facilityData.value[i]!.objectId == newhealth.objectId) {
        facilityData.value[i] = newhealth
      }
    }
  } else {
    // 新增后,更新本地列表
    // console.log('123', newhealth);
    facilityData.value.push(newhealth)
  }
}

// 删除事件
const handleDel = (row: facilityDataType, idx: number) => {
  console.log('删除', row, idx)
  fireFacilityDel(row.objectId).then(async () => {
    facilityData.value.splice(idx, 1) //删除本地
    let res = await fireFacilityGet()
    let { results, count } = res.data
    console.log('111', res, facilityData)
    facilityData.value = results
    total.value = count
  })
}
</script>

<style scoped></style>
